<template>
  <div class="container">
    <div class="top">
      <el-button icon="el-icon-arrow-left" @click="back">返回</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
    <div class="box">
      <div class="top1">编辑北京动态</div>
    </div>
    <div class="banner">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="loginFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 分类 -->
        <el-form-item label="分类:" prop="classify">
          <el-select
            v-model="ruleForm.classify"
            placeholder="请输入分类"
            style="margin-left:-15px"
            @change="change"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.itemName"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 详细分类 -->
        <el-form-item label="详细分类:" prop="classify1">
          <el-select v-model="ruleForm.classify1" placeholder="请输入详细分类" style="margin-left:-15px">
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.itemName"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 标题 -->
        <el-form-item label="标题:" prop="title">
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入标题"
            style="margin-left:-15px"
            type="text"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <!-- 发布时间 -->
        <el-form-item label="发布时间:" prop="date">
          <el-date-picker
            v-model="ruleForm.date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
            style="margin-left:-15px"
          ></el-date-picker>
        </el-form-item>
        <!-- 内容 -->

        <!-- 富文本编辑器组件 -->
        <!-- <Editor v-model="text"></Editor> -->
        <div class="contain">
          <span class="yi">*</span>
          <span class="er">内容:</span>
          <quill-editor v-model="ruleForm.text" ref="QuillEditor" :options="editorOption" />

          <!-- 预览 -->
          <div class="bt-group">
            <Before-looking :ruleForm="ruleForm" modular="编辑北京动态预览" showBetCode="wzgl-djfg-xts"
></Before-looking>
          </div>
        </div>
      </el-form>
    </div>
    <el-dialog title="上传图片" :visible.sync="dialogVisible" width="25%">
      <div class="upload-title">请选择你要上传的图片</div>
      <Upload v-if="dialogVisible" :ruleForm.sync="uploadRuleForm"></Upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import BeforeLooking from "@/components/Looking/BeforeLooking";
import Upload from "@/components/Upload/Upload.vue";
export default {
  components: { BeforeLooking, Upload },
  data() {
    const _this = this;
    const toolbarOptions = [
      ["bold", "italic", "underline", "strike"], // toggled buttons
      ["blockquote", "code-block"],

      [
        {
          header: 1,
        },
        {
          header: 2,
        },
      ], // custom button values
      [
        {
          list: "ordered",
        },
        {
          list: "bullet",
        },
      ],
      [
        {
          script: "sub",
        },
        {
          script: "super",
        },
      ], // superscript/subscript
      [
        {
          indent: "-1",
        },
        {
          indent: "+1",
        },
      ], // outdent/indent
      [
        {
          direction: "rtl",
        },
      ], // text direction

      [
        {
          size: ["small", false, "large", "huge"],
        },
      ], // custom dropdown
      [
        {
          header: [1, 2, 3, 4, 5, 6, false],
        },
      ],

      [
        {
          color: [],
        },
        {
          background: [],
        },
      ], // dropdown with defaults from theme
      [
        {
          font: [],
        },
      ],
      [
        {
          align: [],
        },
      ],
      ["link", "image", "video"],
      ["clean"], // remove formatting button
    ];
    return {
      //富文本
      activeHtmlName: "pc",
      length: null,
      dialogVisible: false,
      uploadRuleForm: {},
      params: {
        endTime: "",
        pageNum: 1,
        sortCode1: "",
        sortCode2: "",
        startTime: "",
        title: "",
        pageSize: 10,
      },
      // 编辑
      msg: [],
      ruleForm: {
        date: "",
        text: "",
        title: "",
        classify: "",
        classify1: "",
      },
      // 分类
      options: [],
      // 详细分类
      options1: [],
      tableList: [],
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        classify: [{ required: true, message: "请输入分类", trigger: "blur" }],
        classify1: [
          { required: false, message: "请输入详细分类", trigger: "blur" },
        ],
        date: [{ required: true, message: "请输时间", trigger: "blur" }],
      },
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  _this.dialogVisible = true;
                  let quill = _this.$refs.QuillEditor.quill;
                  _this.length = quill.getSelection().index;
                  // alert("自定义图片");
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
    };
  },
  async created() {
    await this.get();

    await this.Api.Fenlei({
      typeCode: "BJ_INFO_SORT1",
    }).then((res) => {
      console.log(res, "分类");
      this.options = res.data;
    });

    await this.Api.Fenlei1({
      typeCode: "BJ_INFO_SORT2",
    }).then((res) => {
      console.log(res, "详细分类");
      this.data1 = res.data;
      this.options1 = res.data;
    });
  },
  computed: {
    //图片获取根路径
    baseUrl() {
      return this.$store.state.PortalManagement.fileIp;
    },
  },
  watch: {
    uploadRuleForm(n) {
      this.handleSuccess(this.baseUrl + n.pic);
    },
  },
  methods: {
    //图片上传时触发

    handleSuccess(res) {
      this.dialogVisible = false;
      console.log(res, "res11111");
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill;
      console.log(quill, "quill");
      console.log(quill.getSelection(), "getSelection");
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = this.length;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, "image", res);
        // 调整光标到最后
        quill.setSelection(length + 1);
        console.log(this.ruleForm.context, "context");
      } else {
        // 提示信息，需引入Message
        Message.error("图片插入失败");
      }
    },
    get() {
      this.Api.getBeijing(this.params).then((res) => {
        console.log(res, "get");
        if (res.code == 0) {
          this.tableList = res.data.records;
          console.log(this.data3);

          this.tableList.map((item) => {
            if (item.publishStatus == 5) {
              this.$set(item, "isTrue", true);
            } else if (item.publishStatus == 1) {
              this.$set(item, "isTrue", false);
            }
            this.options.map((item1) => {
              if (item1.itemValue == item.sortCode1) {
                this.$set(item, "sortNme1", item1.itemName);
              }
            });
            this.data1.map((item1) => {
              if (item1.itemValue == item.sortCode2) {
                this.$set(item, "sortNme2", item1.itemName);
              }
            });
          });

          let id = this.$route.query.id;
          this.tableList.map((item) => {
            if (item.id == id) {
              this.msg = item;
            }
          });
          this.Api.BjEdit({ id: id }).then((res) => {
            console.log(res);
            this.ruleForm.date = res.data.publishTime;
            this.ruleForm.title = res.data.title;
            this.ruleForm.classify = res.data.sortCode1 + "";
            this.ruleForm.classify1 = res.data.sortCode2 + "";
            this.ruleForm.text = res.data.context;
            if (res.data.sortCode1 == 1) {
              this.Api.Fenlei1({
                typeCode: "BJ_INFO_SORT2",
              }).then((res) => {
                console.log(res, "详细分类");
                this.data1 = res.data;
                this.options1 = res.data;
              });
            } else {
              this.options1 = [];
              this.ruleForm.classify1 = "";
            }
            this.total = res.data.total;
          });
        }
      });
    },

    change(e) {
      this.options1 = [];
      this.options.forEach((res) => {
        if (e == 1 && res.itemValue == 1) {
          this.options1 = this.data1;
        } else if (e == 2 && res.itemValue == 2) {
          this.options1 = [];
          this.options1 = this.data2;
        } else if (e == 3 && res.itemValue == 3) {
          this.options1 = [];
          this.options1 = this.data3;
        } else if (e == 4 && res.itemValue == 4) {
          this.options1 = [];
          this.options1 = this.data4;
        }
      });
    },

    //   返回
    back() {
      console.log(123);
      this.$router.go(-1);
    },
    // 提交
    submit() {
      this.$refs["loginFormRef"].validate((valid) => {
        if (valid) {
          this.Api.BjNew({
            publishTime: this.ruleForm.date,
            context: this.ruleForm.text,
            id: this.msg.id,
            sortCode1: this.ruleForm.classify,
            sortCode2: this.ruleForm.classify1,
            title: this.ruleForm.title,
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success("编辑成功");
              this.$router.go(-1);
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 460px;
}
/deep/.bt-group {
  display: flex;
  align-items: flex-end;
  position: relative;
  .el-button--preview {
    width: 70px;
    height: 36px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(61, 127, 255, 1);
    color: #3d7fff;
    padding: 0;
    margin-left: 10px;
    position: absolute;
    bottom: 165px;
  }
}
.container {
  padding: 0 20px;
}
.top {
  height: 68px;
  line-height: 68px;

  color: #333333;
  font-size: 20px;
  border-bottom: 1px solid #dddddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-button {
  width: 70px;
  height: 36px;
  padding: 0;
}
.top1 {
  height: 60px;
  color: #333333;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
  border-bottom: 1px solid #ddd;
}
.banner {
  padding: 26px 0;
}
/deep/.el-input__inner {
  width: 460px;
  height: 36px;
}
/deep/.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  width: 83px !important;
}
/deep/.el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: -13px;
}
// 富文本编辑器
/deep/.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding: 5px;
  width: 1350px;
}
/deep/ .ql-container.ql-snow {
  border: 1px solid #ccc;
  width: 1350px;
  height: 300px;
}
.contain {
  display: flex;
  margin-left: 30px;
}
.er {
  font-size: 14px;
  color: #333333;
  margin-right: 13px;
}
.yi {
  color: #ff0000;
  margin-right: 4px;
}
</style>